<template>
  <div class="org-dis-wrap">
    <el-dialog :visible.sync="dialogVisible.show" center>
      <div class="show-title">分组ID：{{ org_id_check }}</div>
      <div class="show-title">分组名称：{{ org_name }}</div>
      <div class="center">
        <div class="left">
          <OrgDistrictLeft :org_id="org_id_check" ref="mychildLeft" />
        </div>
        <div class="right">
          <OrgDistrictRight :org_id="org_id_check" ref="mychildRight" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import OrgDistrictLeft from "./OrgDistrictLeft";
import OrgDistrictRight from "./OrgDistrictRight";
export default {
  name: "audit",
  components: { OrgDistrictLeft, OrgDistrictRight },
  props: {
    org_id_check: {
      type: String,
      default: ""
    },
    org_name: {
      type: String,
      default: ""
    },
    dialogVisible: {
      type: Object,
      default() {
        return {
          show: false
        };
      }
    }
  },
  watch: {
    org_id_check: {
      handler(newVal) {
        // this.$refs.mychildLeft.search(newVal);
        // this.$refs.mychildRight.search(newVal);
      }
    }
  },
  methods: {}
};
</script>

<style scoped>
.center {
  width: 100%;
  height: 500px;
  /* overflow-y: scroll; */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.show-title {
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  color: #676a6d;
  display: inline-block;
  margin-right: 30px;
  margin-bottom: 10px;
}
.left {
  width: 49%;
  height: 100%;
  border: 1px solid #e6eaf1;
  box-shadow: rgb(0 0 0 / 55%) 0px 2px 10px;
  border-radius: 5px;
  position: relative;
  overflow-x: scroll;
  overflow-y: scroll;
}
.right {
  width: 49%;
  height: 100%;
  border: 1px solid #e6eaf1;
  box-shadow: rgb(0 0 0 / 55%) 0px 2px 10px;
  border-radius: 5px;
  position: relative;
  overflow-x: scroll;
  overflow-y: scroll;
}
.org-dis-wrap >>> .el-dialog {
  width: 93%;
}
</style>
